<template>
	<view class="travelBannerClassifyPage">
		<view class="status_bar" :style="'height:' + menuHeight + 'px'"><!-- 这里是状态栏 --></view>
		<view class="pageTitle">
			<view class="back_btn" @tap="backPage">
				<image class="icon-36" src="../../static/images/icon/icon_back_left.png" mode=""></image>
			</view>
			<view class="centerTitle">{{ pageTitle }}</view>
			<view></view>
		</view>
		<view class="top_banner_box">
			<image :src="curClassify.top_image" mode="aspectFill"></image>
		</view>
		<view class="short_tabs_box">
			<ShortTabs :tabs="tabs" :center="true" :curTabs="curTabs" @changeTab="changeTab"></ShortTabs>
		</view>
		<view class="list">
			<TourList :list="tourList.lists"></TourList>
			<u-loadmore :status="loadMoreStatus" v-if="goodsList.lists.length" />
		</view>
	</view>
</template>

<script>
	import com from '../../mixin/index.js';
	import ShortTabs from '../../components/shortTabs/shortTabs.vue';
	import TourList from '../../components/tourList.vue';
	export default {
		components: {
			ShortTabs,
			TourList
		},
		mixins: [com],
		data() {
			return {
				curClassify: {
					top_image: ''
				},
				tabs: [],
				curTabs: 0,
				recommendList: [],
				pageTitle: '',
				tourList: {
					lists: [],
					total: 1,
					total_page: 0
				}
			};
		},
		onLoad(val) {
			this.recommendList = uni.getStorageSync('travel_recommend_list');
			this.curTabs = val.idx;
			this.curClassify = this.recommendList[val.idx];
			this.pageTitle = this.curClassify.name;
			this.getTourList();
			this.tabs = this.recommendList.map(item => item.name);
		},
		onPullDownRefresh() {
			this.tourList = {
				lists: [],
				total: 1,
				total_page: 0
			};
			this.page.page = 1;
			this.getTourList();
		},
		onReachBottom() {
			this.getTourList();
		},
		methods: {
			changeTab(idx) {
				this.curTabs = idx;
				this.curClassify = this.recommendList[idx];
				this.page = {
					page: 1,
					page_size: 12
				};
				this.tourList = {
					lists: [],
					total: 1,
					total_page: 0
				};
				this.getTourList();
			},
			getTourList() {
				let params = {
					...this.page,
					tour_active_id: this.curClassify.id
				};
				this.getList('tourList', 'getTourList', 'page', params).then(res => {
					uni.stopPullDownRefresh();
				});
			}
		}
	};
</script>

<style lang="scss">
	.travelBannerClassifyPage {
		background-color: #f9f9f9;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 24rpx;

		.status_bar {}

		.pageTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0rpx;
			margin-bottom: 30rpx;

			.back_btn {}

			.centerTitle {
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.top_banner_box {
			margin-bottom: 26rpx;

			image {
				width: 100%;
				height: 264rpx;
				border-radius: 20rpx;
			}
		}

		.short_tabs_box {
			margin-bottom: 40rpx;
		}

		.list {}
	}
</style>